<template>
  <div class="content_body">
    <div class="content_body_content">
      <h4 class="content_body_title">{{ $route.query.problem_title }}</h4>
      <div class="content_body_dec">{{ content }}</div>
    </div>
    <div class="content_body_tip">- 下面是专家的留言 -</div>
    <div class="content_body_item" v-for="(item, i) in listData" :key="i">
      <div class="content_body_answer">答：{{ item.content }}</div>
      <div class="content_body_from">来自专家&nbsp;{{ item.phone }}</div>
    </div>
    <div class="content_body_control" v-if="expertBool === 1">
      <textarea placeholder="您是专家，请回答" v-model="message"></textarea>
      <button @click="sendAnswer">提 交</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      listData: [],
      message: null,
      content: null,
      expertBool: 0
    };
  },
  // 放心这是一年前和2022年的代码差异
  async mounted() {
    this.expertBool = parseInt(this.$cookie.getCookie("expertBool"));
    // this.$axios.get("api/problem/" + this.$route.query.problem_id).then(({ data }) => {
    //   this.content = data.problem;
    //   this.listData = data.list;
    // });
    const [{ data: mProblemContent }, { data: mReplyList }] = await Promise.all([
      (await axios.get("api/problem/" + this.$route.query.problem_id)).data,
      (await axios.post("api/problem/lookReply", "problemId=" + this.$route.query.problem_id)).data,
    ])
    this.content = mProblemContent.content;
    this.listData = mReplyList;
  },
  methods: {
    sendAnswer() {
      this.$axios.get("Api/MessageReply", {
        params: {
          problem_id: this.$route.query.problem_id,
          content: this.message,
          name: this.$cookie.getCookie("name"),
          phonenumber: this.$cookie.getCookie("phone")
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.$msgBox.show("回复留言成功", "success", 250, 60);
          window.history.go();
        } else {
          this.$msgBox.show(data.data.msg, "error", 250, 60);
        }
      })
    }
  }
};
</script>

<style scoped>
.content_body {
  max-width: 1000px;
  margin: 0 auto;
}
.content_body_control {
  padding: 10px;
}
.content_body_control textarea {
  font-family: "微软雅黑";
  resize: none;
  width: 100%;
  box-sizing: border-box;
  height: 100px;
  font-size: 15px;
  padding: 5px 10px;
  outline-color: skyblue;
  border: 1px solid #e0e0e0;
}
.content_body_control button {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  padding: 5px 10px;
  outline-color: skyblue;
  border: 1px solid var(--success);
  background-color: var(--success);
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
}
.content_body_tip {
  text-align: center;
  font-size: 12px;
  color: gray;
}
.content_body_dec {
  padding: 10px;
}
.content_body_title {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.content_body_item {
  padding: 10px;
  border-bottom: 1px solid var(--borderColor);
}
.content_body_answer {
  font-size: 15px;
  font-weight: bold;
}
.content_body_from {
  color: gray;
  font-size: 13px;
}
</style>